<template>
    <el-dialog :visible.sync="isShow" :title="headerTitle" @close="handleClose" center top="14vh" width="364px" append-to-body :fullscreen="fullscreen">
        <el-form :model="dialogForm" size="small" label-position="top" label-suffix=":" ref="detailForm" :rules="rules" label-width="80px">
            <!--              单位名称-->
            <el-form-item :label="$t('basicData.unitName')" prop="unitName">
                <el-input v-model="dialogForm.unitName" :placeholder="$t('public.inputPl')" clearable />
            </el-form-item>
            <!--              度量单位文本：-->
            <el-form-item :label="$t('basicData.MeasurementUnitText')" prop="measureUnitText">
                <el-input v-model="dialogForm.measureUnitText" :placeholder="$t('public.inputPl')" clearable />
            </el-form-item>
            <!--              描述信息：-->
            <el-form-item :label="$t('basicData.description')" prop="description">
                <el-input v-model="dialogForm.description" type="textarea" maxlength="1000" :placeholder="$t('public.inputPl')" clearable />
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button v-if="type==3" @click="$emit('update:visible',false)" icon="el-icon-close" size="small">{{$t('public.close')}}</el-button>
            <el-button v-else type="primary" @click="submitForm" :loading="loading" icon="el-icon-document" size="small">{{$t('public.save')}}</el-button>
        </div>
    </el-dialog>
</template>

<script>
// import {listAllCheckoutUnitMessage } from "@/api/basic/gaugeMessage";
import {addCheckoutUnit, updateCheckoutUnit} from '@/api/basic/checkoutUnit'
// import EnjoySelectUser from "@/components/EnjoySelectUser";
// import EnjoySelectDeptTree from "@/components/EnjoySelectDeptTree";
// import FileUploadInput from "@/components/FileUploadInput";

export default {
    name: 'mtool-detial',
    // components:{EnjoySelectUser,EnjoySelectDeptTree,FileUploadInput},
    // dicts: [
    //   'NYIQC_STANDARD', //标准品 【是，否】
    //   'NYIQC_STATUS', //状态 【0 再用 1停用 2报废】
    //   'NYIQC_MSA_STATUS', //MSA状态 【0完成  1未开始  2进行中】
    // ],
    props: {
        value: {
            type: Object,
        },
        visible: {
            type: Boolean,
            default: false,
        },
        type: [String, Number], //1:新增  2：编辑 3：查看
    },
    watch: {
        visible(val) {
            if (val && this.value) {
                this.dialogForm = { ...this.value }
            }
        },
    },
    computed: {
        isShow: {
            get() {
                return this.visible
            },
            set() {},
        },
        headerTitle() {
            const { type } = this
            let title = ''
            if (type == 1) {
                title = this.$t('mtool.newCharacterUnit')
            }
            if (type == 2) {
                title = this.$t('mtool.editCharacterUnit')
            }
            if (type == 3) {
                title = this.$t('mtool.viewHeader')
            }
            return title
        },
    },
    data() {
        return {
            loading: false,
            fullscreen: false,
            deviceOptions: undefined,
            factoryOptions: undefined,
            dialogForm: {},
            // 表单校验
            rules: {
                unitName: [
                    {
                        required: true,
                        message: '单位名称不能为空',
                        trigger: 'blur',
                    },
                ],
                measureUnitText: [
                    {
                        required: true,
                        message: '度量单位文本不能为空',
                        trigger: 'blur',
                    },
                ],
            },
        }
    },
    methods: {
        /** 发起提交 */
        submitForm: function () {
            this.$refs.detailForm.validate((valid) => {
                let action =
                    this.type == 1 ? addCheckoutUnit : updateCheckoutUnit
                if (valid) {
                    this.loading = true
                    action(this.dialogForm)
                        .then((res) => {
                            this.loading = false
                            if (res.code == 200) {
                                this.$emit('refresh')
                                this.$modal.msgSuccess('操作成功!')
                                this.$emit('update:visible', false)
                            } else {
                                this.$modal.msgError(res.msg)
                            }
                        })
                        .catch((res) => {
                            this.loading = false
                        })
                }
            })
        },
        handleClose(done) {
            this.$emit('update:visible', false)
            this.$refs['detailForm'].resetFields()
        },
        //设备模糊查询
        deviceRemoteMethod(val, cb) {
            console.log(val)
            listAllCheckoutUnitMessage({ deviceName: val }).then((res) => {
                this.deviceOptions = res.data.map((i) => i.deviceName)
                cb(res.data)
            })
        },
        handleDeviceSelect(e) {
            this.dialogForm.deviceName = e.deviceName
            this.dialogForm.gaugeType = e.gaugeType
            this.$refs.deviceName.$emit('el.form.blur')
        },
        handleDeviceBlur(e) {
            const { deviceOptions, dialogForm } = this
            if (!deviceOptions.includes(dialogForm.deviceName)) {
                this.dialogForm.deviceName = ''
            }
        },
        //工厂模糊查询
        // factoryRemoteMethod(val,cb){
        //   listALLFactory({factoryName:val}).then(res=>{
        //     this.factoryOptions = res.data.map(i=>i.deviceName)
        //     cb(res.data)
        //   })
        // },
        handleFactorySelect(e) {
            this.dialogForm.factoryName = e.factoryName
            this.$refs.factoryName.$emit('el.form.blur')
        },
        handleFactoryBlur(e) {
            const { factoryOptions, dialogForm } = this
            if (!factoryOptions.includes(dialogForm.factoryName)) {
                this.dialogForm.factoryName = ''
            }
        },
        handleExpireTime(e) {
            console.log(e)
            const today = new Date().getTime()
            const val = new Date(e).getTime()
            if (val > today) {
                this.dialogForm.remDay = ~~(
                    (val - today) /
                    1000 /
                    60 /
                    60 /
                    24
                ).toFixed(1)
            } else {
                this.dialogForm.remDay = 0
            }
            this.$forceUpdate()
        },
        handleRespName(e) {
            this.dialogForm.respName = e.name
        },
        handleEmployName(e) {
            this.dialogForm.employName = e.name
        },
        handleRespDept(e) {
            this.dialogForm.respDept = e.name
        },
    },
}
</script>

<style scoped>
</style>
